<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>总部系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>身份列表</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="btnBox">
                <div>
                    <el-button size="small" @click="addIdentify">添加身份</el-button>
                </div>
                <!-- <div>
                    <el-button size="small" icon="el-icon-upload2" @click="handle('up', 'top')">启用</el-button>
                    <el-button size="small" icon="el-icon-download" @click="handle('down', 'top')">禁用</el-button>
                </div> -->
            </div>
            <el-table :data="tableData" border style="width: 100%" height="626" @selection-change="selectChange">
                <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                <el-table-column prop="identityId" label="编号" width="120"></el-table-column>
                <el-table-column prop="identityName" label="身份"></el-table-column>
                <!-- <el-table-column prop="operatorStatus" label="状态">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.operatorStatus == 1">使用中</el-tag>
                        <el-tag type="warning" v-else>禁用中</el-tag>
                    </template>
</el-table-column> -->
                <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button size="small" icon="el-icon-tickets"
                            @click="handle('right', 'table', scope.row)">授权</el-button>
                        <!-- <el-button size="small" icon="el-icon-upload2"
                            @click="handle('up', 'table', scope.row.operatorId)">启用</el-button>
                        <el-button size="small" icon="el-icon-download"
                            @click="handle('down', 'table', scope.row.operatorId)">禁用</el-button> -->
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog title="授权" :visible.sync="addDia" width="36%" :before-close="closeDia">
                <div class="inputBox">
                    身份名称：<el-input v-model="selectUser.identityName" placeholder="输入身份名称" size="small"
                        style="width: 200px;"></el-input>
                </div>
                <el-transfer v-model="value" :data="menusList" :titles="['未分配', '已分配']">
                </el-transfer>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="closeDia">取 消</el-button>
                    <el-button type="primary" @click="addSubmit()">确 定</el-button>
                </span>
            </el-dialog>


        </el-card>

    </div>
</template>


<script>
import { updateOperatorStaus, getIdentityList, getIdentityMenuById, getMenuListByCompanyId, addIdentityList, updateIdentityById } from '../../network/operator'
export default {
    data() {
        return {
            companyId: sessionStorage.companyId,
            tableData: [],


            addDia: false,

            selectList: [],//勾选的数据
            menus: [],
            selectUser: {
                identityName: ''
            },
            value: [],//选择的菜单
            menusList: [

            ],
            editFlag: false
        };
    },
    methods: {

        addIdentify() {
            this.addDia = true;
        },
        selectChange(val) {
            console.log(val);
            this.selectList = val
        },


        handle(flag, position, obj) {
            if (position == 'top' && this.selectList.length == 0) {
                this.$message.warning('请选择要操作的数据')
                return
            }

            if (position == 'top') {
                if (flag == 'up') {
                    // 启用多个
                    let Ids = '';
                    for (let i = 0; i < this.selectList.length; i++) {
                        Ids = Ids + this.selectList[i].operatorId + ',';
                    }
                    updateOperatorStaus({
                        Ids: Ids,
                        Status: 1
                    }).then(res => {
                        if (res.flag) {
                            this.getList('search')
                        }
                    })
                } else {
                    // 禁用多个
                    // 启用多个
                    let Ids = '';
                    for (let i = 0; i < this.selectList.length; i++) {
                        Ids = Ids + this.selectList[i].operatorId + ',';
                    }
                    updateOperatorStaus({
                        Ids: Ids,
                        Status: 0
                    }).then(res => {
                        if (res.flag) {
                            this.getList('search')
                        }
                    })
                }
            } else {
                if (flag == 'up') {
                    // 启用
                    updateOperatorStaus({
                        Ids: obj,
                        Status: 1
                    }).then(res => {
                        if (res.flag) {
                            this.getList('search')
                        }
                    })
                } else if (flag == 'down') {
                    // 禁用
                    updateOperatorStaus({
                        Ids: obj,
                        Status: 0
                    }).then(res => {
                        if (res.flag) {
                            this.getList('search')
                        }
                    })
                } else if (flag == 'right') {

                    // 授权
                    this.selectUser = obj
                    this.addDia = true
                    this.addFlag = flag
                    this.getIdentityMenuById()
                }
            }
        },

        closeDia() {
            this.addDia = false
            this.selectUser = {
                identityName: ''
            }
            this.value = []
        },

        addSubmit() {
            if (this.selectUser.identityName == '') {
                this.$message.warning('请输入身份名称')
                return
            }
            if (this.value.length == 0) {
                this.$message.warning('请选择要分配的权限')
                return
            }

            var arr = [], ids = '';
            this.value.forEach(ele => {
                arr.push(ele)
                this.menus.forEach(item => {
                    if (item.idArr.includes(ele)) {
                        arr.push(item.menuId)
                    }
                })
            })
            ids = [...new Set(arr)].join(',')
            console.log(ids);
            console.log(this.selectUser);

            if (this.addFlag == 'right') {
                console.log(this.selectUser);
                // return
                updateIdentityById({
                    IdentityId: this.selectUser.identityId,
                    Ids: ids,
                    identityName: this.selectUser.identityName,
                    companyId: this.companyId
                }).then(res => {
                    if (res.flag) {
                        this.closeDia();
                        this.IdentityList();
                        this.$message.success('分配成功')
                    } else {
                        this.$message.warning('分配失败')
                    }
                })
            } else {
                addIdentityList({
                    Ids: ids,
                    identityName: this.selectUser.identityName,
                    companyId: this.companyId
                }).then(res => {
                    if (res.flag) {
                        this.closeDia();
                        this.IdentityList();
                        this.$message.success('分配成功')
                    } else {
                        this.$message.warning('分配失败')
                    }
                })
            }


        },

        addHandle() {
            this.addDia = true
        },


        getMenuList() {
            getMenuListByCompanyId({}).then(res => {
                if (res.flag) {
                    this.menusList = []
                    res.data.forEach(item => {
                        item.idArr = []
                        item.children.forEach(ele => {
                            item.idArr.push(ele.menuId)
                            ele.key = ele.menuId
                            ele.label = ele.menuName
                            this.menusList.push(ele)
                        })

                    })
                    this.menus = res.data;
                }
            })
        },


        IdentityList() {
            getIdentityList({
                companyId: this.companyId,
            }).then(res => {
                if (res.flag) {
                    this.tableData = res.data
                    console.log(this.tableData);
                }
            })
        },

        getIdentityMenuById() {
            console.log(this.selectUser.identityId,);
            getIdentityMenuById({
                identityId: this.selectUser.identityId,
            }).then(res => {
                if (res.flag) {
                    this.value = []
                    console.log(this.menusList);
                    console.log(res);
                    res.data.forEach(ele => {
                        this.value.push(ele.menuId)
                    })




                }
            })
        }

    },
    created() {
        this.IdentityList()
        this.getMenuList()
    },
    filters: {

    },
};
</script>

<style scoped>
.btnBox>div>span {
    width: 100px;
    display: inline-block;
    font-size: 14px;
}

.nameTip {
    margin-bottom: 16px;
}


.inputBox {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}
</style>